<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.tailwindcss.com"></script>


    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .main_default {
            display: flex;
            height: 200px;
            list-style: none;
            border: dashed 1px black;
        }

        .main_default .first {
            background-color: red;
        }

        .main_default .second {
            background-color: green;
        }

        .main_default .third {
            background-color: yellow;
        }

        .displaynone {
            display: none;
            /* display: block; */
        }
    </style>
</head>

<body>

    <!-- 
Flex-direction:row;
Flex-wrap:nowrap;
Justify-content:flex-start;
Align-items: strech; 
-->

    <div class="displaynonex ">
        <h2 class="font-bold text-xl my-4">flex-direction: flex-row</h2>
        <ul class="main_default flex h-[200px] list-none border-dashed border-2 border-black">
            <li class="first bg-red-600">red</li>
            <li class="second bg-green-600">green</li>
            <li class="third bg-yellow-600">yellow</li>
        </ul>
        <h2 class="font-bold text-xl my-4">flex-direction: flex-row-reverse</h2>
        <ul class="main_default flex-row-reverse">
            <li class="first">red</li>
            <li class="second">green</li>
            <li class="third">yellow</li>
        </ul>
        <h2 class="font-bold text-xl my-4">flex-direction: flex-col</h2>
        <ul class="main_default flex-col">
            <li class="first">red</li>
            <li class="second">green</li>
            <li class="third">yellow</li>
        </ul>
        <h2 class="font-bold text-xl my-4">flex-direction: flex-col-reverse</h2>
        <ul class="main_default flex-col-reverse">
            <li class="first">red</li>
            <li class="second">green</li>
            <li class="third">yellow</li>
        </ul>
    </div>

    <div class="displaynonex hiddenx">
        <h2 class="font-bold text-xl my-4">flex-wrap: nowrap, flex-nowrap</h2>
        <ul class="main_default w-[400px] flex-nowrap ">
            <li class="first w-[200px]">red</li>
            <li class="second w-[200px]">green</li>
            <li class="third w-[200px]">yellow</li>
        </ul>
        <h2 class="font-bold text-xl my-4">flex-wrap: wrap, flex-wrap</h2>
        <ul class="main_default w-[400px] flex-wrap border-none">
            <li class="first w-[200px] mx-0">red</li>
            <li class="second w-[200px]  mx-0">green</li>
            <li class="third w-[200px]  mx-0">yellow</li>
        </ul>
        <h2 class="font-bold text-xl my-4">flex-wrap: wrap-reverse, flex-wrap-reverse</h2>
        <ul class="main_default w-[400px] flex-wrap-reverse border-none">
            <ul class="main_default w-[400px] flex-wrap-reverse border-none">
                <li class="first w-[200px] mx-0">red</li>
                <li class="second w-[200px]  mx-0">green</li>
                <li class="third w-[200px]  mx-0">yellow</li>
            </ul>
    </div>
    <div class="displaynonex hiddenx">
        <h2 class="font-bold text-xl my-4">justify-content: flex-start; justify-start</h2>
        <ul class="main_default w-[400px] flex-wrap border-none justify-start">
            <li class="first w-[200px]">red</li>
            <li class="second w-[200px]">green</li>
            <li class="third w-[200px]">yellow</li>
        </ul>
        <h2 class="font-bold text-xl my-4">justify-content: flex-end; justify-end</h2>
        <ul class="main_default w-[400px] flex-wrap border-none  justify-end">
            <li class="first w-[200px] mx-0">red</li>
            <li class="second w-[200px]  mx-0">green</li>
            <li class="third w-[200px]  mx-0">yellow</li>
        </ul>

        <h2 class="font-bold text-xl my-4">justify-content: flex-center; justify-center</h2>
        <ul class="main_default w-[400px] flex-wrap border-none justify-center">
            <li class="first w-[200px] mx-0">red</li>
            <li class="second w-[200px]  mx-0">green</li>
            <li class="third w-[200px]  mx-0">yellow</li>
        </ul>
        <!-- 两端对齐 项目之间的间隔都相等 -->
        <h2 class="font-bold text-xl my-4">justify-content: space-between; justify-between</h2>
        <ul class="main_default w-[400px] flex-wrap border-none justify-between">
            <li class="first w-[200px] mx-0">red</li>
            <li class="second w-[200px]  mx-0">green</li>
            <li class="third w-[100px]  mx-0">yellow</li>
            <li class="third w-[100px]  mx-0">yellow</li>
        </ul>

        <!-- 每个项目两侧的间隔相等 -->
        <h2 class="font-bold text-xl my-4">justify-content: space-around; justify-around</h2>
        <ul class="main_default w-[400px] flex-wrap border-none justify-around  ">
            <li class="first w-[200px] mx-0">red</li>
            <li class="second w-[200px]  mx-0">green</li>
            <li class="third w-[100px]  mx-0">yellow</li>
            <li class="third w-[100px]  mx-0">yellow</li>
        </ul>
        <h2 class="font-bold text-xl my-4">justify-content: normal; justify-normal</h2>
        <ul class="main_default w-[400px] flex-wrap border-none justify-normal  ">
            <li class="first w-[200px] mx-0">red</li>
            <li class="second w-[200px]  mx-0">green</li>
            <li class="third w-[100px]  mx-0">yellow</li>
            <li class="third w-[100px]  mx-0">yellow</li>
        </ul>
        <!-- 使用 justify-evenly 沿容器的主轴对齐条目，以便每个项目周围有相等的空间 -->
        <h2 class="font-bold text-xl my-4">justify-content: space-evenly; justify-evenly</h2>
        <ul class="main_default w-[400px] flex-wrap border-none justify-evenly  ">
            <li class="first w-[200px] mx-0">red</li>
            <li class="second w-[200px]  mx-0">green</li>
            <li class="third w-[100px]  mx-0">yellow</li>
            <li class="third w-[100px]  mx-0">yellow</li>
        </ul>
        <h2 class="font-bold text-xl my-4">justify-content: stretch; justify-stretch</h2>
        <ul class="main_default w-[400px] flex-wrap border-none justify-stretch  ">
            <li class="first w-[100px] mx-0">red</li>
            <li class="second w-[100px]  mx-0">green</li>
        </ul>
    </div>

    <div class="hiddenx">
        <h2 class="font-bold text-xl my-4">align-items: stretch</h2>
        <div class="flex  w-full bg-gray-100 h-[100px] items-stretch">
            <div class="py-4  flex items-center flex-1 justify-center rounded-lg shadow-lg w-20 h-full bg-cyan-500">
                01
            </div>
            <div class="py-4 mx-4 flex items-center flex-1 justify-center rounded-lg shadow-lg w-20 h-full bg-cyan-500">
                02
            </div>
            <div class="py-4 flex items-center flex-1 justify-center rounded-lg shadow-lg w-20 h-full bg-cyan-500">03
            </div>
        </div>
    </div>
    <div class="hiddenx">
        <h2 class="font-bold text-xl my-4">align-items: flex-start</h2>
        <div class="flex  w-full bg-gray-100 h-[100px] items-start">
            <div class="py-4  flex items-center flex-1 justify-center rounded-lg shadow-lg w-20 h-1 bg-cyan-500">
                01
            </div>
            <div class="py-4 mx-4 flex items-center flex-1 justify-center rounded-lg shadow-lg w-20 h-full bg-cyan-500">
                02
            </div>
            <div class="py-4 flex items-center flex-1 justify-center rounded-lg shadow-lg w-20 h-15 bg-cyan-500">03
            </div>
        </div>
    </div>
    <div class="hiddenx">
        <h2 class="font-bold text-xl my-4">align-items: flex-end</h2>
        <div class="flex  w-full bg-gray-100 h-[100px] items-end">
            <div class="py-4  flex items-center flex-1 justify-center rounded-lg shadow-lg w-20 h-1 bg-cyan-500">
                01
            </div>
            <div class="py-4 mx-4 flex items-center flex-1 justify-center rounded-lg shadow-lg w-20 h-full bg-cyan-500">
                02
            </div>
            <div class="py-4 flex items-center flex-1 justify-center rounded-lg shadow-lg w-20 h-15 bg-cyan-500">03
            </div>
        </div>
    </div>
    <div class="hiddenx">
        <h2 class="font-bold text-xl my-4">align-items: flex-center</h2>
        <div class="flex  w-full bg-gray-100 h-[100px] items-center">
            <div class="py-4  flex items-center flex-1 justify-center rounded-lg shadow-lg w-20 h-1 bg-cyan-500">
                01
            </div>
            <div class="py-4 mx-4 flex items-center flex-1 justify-center rounded-lg shadow-lg w-20 h-full bg-cyan-500">
                02
            </div>
            <div class="py-4 flex items-center flex-1 justify-center rounded-lg shadow-lg w-20 h-15 bg-cyan-500">03
            </div>
        </div>
    </div>
    <div class="hiddenx">
        <h2 class="font-bold text-xl my-4">align-items: flex-baseline</h2>
        <div class="flex  w-full bg-gray-100 h-[100px] items-baseline">
            <div class="pt-2 pb-6  flex items-center flex-1 justify-center rounded-lg shadow-lg h-full bg-cyan-500">
                01
            </div>
            <div
                class="py-8 pb-12 mx-4 flex items-center flex-1 justify-center rounded-lg shadow-lg h-full bg-cyan-500">
                02
            </div>
            <div class="pt-12 pb-4 flex items-center flex-1 justify-center rounded-lg shadow-lg h-full bg-cyan-500">
                03
            </div>
        </div>
    </div>
    <div class="hiddenx pt-10">
        <h2 class="font-bold text-xl my-4">
            align-center: flex-start
            <br /> 多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
            <br /> 可以作用 grid
        </h2>
        <div class="flex  w-full bg-gray-100 h-[100px] content-start">
            <div class="flex items-center flex-1 justify-center rounded-lg shadow-lg h-full bg-cyan-500">
                01
            </div>
            <div class="mx-4 flex items-center flex-1 justify-center rounded-lg shadow-lg h-full bg-cyan-500">
                02
            </div>
            <div class=" flex items-center flex-1 justify-center rounded-lg shadow-lg h-full bg-cyan-500">
                03
            </div>
        </div>
    </div>
    <div class="hiddenx ">
        <h2 class="font-bold text-xl my-4">
            center
        </h2>
        <div class="flex w-full justify-center items-center h-[100px]">
            <div class="flex bg-cyan-500 text-white h-full  min-w-48  items-center justify-center rounded-lg shadow-lg">
                01
            </div>
        </div>
        <div class="flex w-full justify-center items-center h-[100px]">
            <div
                class="flex bg-cyan-500 text-white h-full  min-w-[80px] max-h-[60px] items-center justify-center rounded-lg shadow-lg">
                02
            </div>
        </div>
    </div>
    <div class="hiddenx ">
        <h2 class="font-bold text-xl my-4">
            flex-grow: grow-[number] , 定义项目的放大比例，flex-grow: 0不增长， 默认为0，即如果存在剩余空间，也不放大 <br />
            flex-grow: 1 剩余空间按照比例增长 <br />
            flex-shrink: shrink-[number] , 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。 <br />
        </h2>
        <h2 class="font-bold text-l my-4">
            flex-grow: 1 剩余空间按照比例增长 <br />
        </h2>
        <div class="flex w-full bg-gray-100 h-[100px]  text-white font-bold text-sm ">
            <div
                class="w-14 flex items-center  justify-center  rounded-lg shadow-lg h-full bg-indigo-300 dark:bg-indigo-800 dark:text-indigo-400">
                01
            </div>
            <div class="mx-4 grow flex items-center justify-center rounded-lg shadow-lg h-full  bg-indigo-500">
                02
            </div>
            <div
                class="w-14 grow-[2] flex items-center justify-center rounded-lg shadow-lg h-full  bg-indigo-300 dark:bg-indigo-800 dark:text-indigo-400">
                03
            </div>
        </div>
        <h2 class="font-bold text-l my-4">
            flex-grow: 0 不增长， grow-0 <br />
        </h2>
        <div class="flex w-full bg-gray-100 h-[100px]  text-white font-bold text-sm ">
            <div
                class="w-14 grow flex items-center  justify-center  rounded-lg shadow-lg h-full bg-indigo-300 dark:bg-indigo-800 dark:text-indigo-400">
                01
            </div>
            <div class="mx-4 w-14 grow-0 flex items-center justify-center rounded-lg shadow-lg h-full  bg-indigo-500">
                02
            </div>
            <div
                class="w-14 grow flex items-center justify-center rounded-lg shadow-lg h-full  bg-indigo-300 dark:bg-indigo-800 dark:text-indigo-400">
                03
            </div>
            flex-grow: 0 不增长， grow-0

        </div>
        <h2 class="font-bold text-l my-4">
            flex-1 等同于 flex-grow: 1 <br />
            hover: grow-0 鼠标悬停时，该项目不增长 <br />
            md:grow-0 仅在屏幕宽度大于等于 768px 时，该项目不增长 , 中等屏幕尺寸及以上时应用 grow-0 工具<br />
        </h2>
        <div class="flex w-full bg-gray-100 h-[100px]  text-white font-bold text-sm ">
            <div
                class="w-14 flex-1 flex items-center  justify-center  rounded-lg shadow-lg h-full bg-indigo-300 dark:bg-indigo-800 dark:text-indigo-400">
                01
            </div>
            <div
                class="mx-4 w-14 flex-1 hover:grow-0 flex items-center justify-center rounded-lg shadow-lg h-full  bg-indigo-500">
                02
            </div>
            <div
                class="w-14 flex-1 md:grow-0 flex items-center justify-center rounded-lg shadow-lg h-full  bg-indigo-300 dark:bg-indigo-800 dark:text-indigo-400">
                03
            </div>
        </div>
        <div class="hiddenx ">
            <h2 class="font-bold text-xl my-4">
                align-self: auto | flex-start | flex-end | center | baseline | stretch 允许单个项目有与其他项目不一样的对齐方式, self-auto,
            </h2>
            <div class="flex w-full justify-center items-center h-[100px]">
                <div
                    class="flex-1 flex bg-cyan-500 text-white h-full     items-center justify-center rounded-lg shadow-lg">
                    01
                </div>
                <!-- self-auto -->
                <!-- self-center -->
                <div class="mx-4 flex-1 
                self-start
                    flex bg-cyan-500 text-white h-1/2   items-center justify-center rounded-lg shadow-lg">
                    02, self-start, align-self: flex-start
                </div>
                <!-- align-self: center -->
                <div class="mx-4 flex-1 
                self-center
                    flex bg-cyan-500 text-white h-1/2   items-center justify-center rounded-lg shadow-lg">
                    02, self-center
                </div>
                <!-- align-self: end -->
                <div class="mx-4 flex-1 
                self-end
                    flex bg-cyan-500 text-white h-1/2   items-center justify-center rounded-lg shadow-lg">
                    02, self-end,
                </div>
                <!-- align-stretch: end -->
                <div class="mx-4 flex-1 
                self-stretch 
                    flex bg-cyan-500 text-white h-1/2   items-center justify-center rounded-lg shadow-lg">
                    02, self-stretch
                </div>
                <div
                    class="flex-1  flex bg-cyan-500 text-white h-full     items-center justify-center rounded-lg shadow-lg">
                    03
                </div>
            </div>
        </div>








        <h1 class="w-full h-[100px]"></h1>
</body>

</html>